<template>
  <view class="my">
    <view class="card">
      <view class="card-item">
        <view class="card-item-text">
          <view class="card-item-text-header">总补贴金额:&nbsp;&nbsp;</view>
          <view class="card-item-text-price">{{
            userInfo.total_commission
          }}</view>
        </view>
        <view class="card-item-but">
          <uv-button
            text="查看"
            shape="circle"
            :customStyle="customStyle"
            :customTextStyle="customTextStyle"
            color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
            @click="withdrawalBut(1)"
          />
        </view>
      </view>
      <view class="card-item">
        <view class="card-item-text">
          <view class="card-item-text-header">已提现金额:&nbsp;&nbsp;</view>
          <view class="card-item-text-price">{{
            userInfo.withdraw_amount
          }}</view>
        </view>
        <view class="card-item-but">
          <uv-button
            text="查看"
            shape="circle"
            :customStyle="customStyle"
            :customTextStyle="customTextStyle"
            color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
            @click="withdrawalBut(2)"
          />
        </view>
      </view>
    </view>
    <uv-button text="去提现" @click="withdrawalBut(3)" />
  </view>
</template>

<script setup>
import { ref } from "vue";
import { getMyDataAPI } from "../../api/index";
import { onLoad } from "@dcloudio/uni-app";

const userInfo = ref({}); // 个人信息
const customStyle = ref({
  width: "100rpx",
  height: "50rpx",
  borderRadius: "40rpx",
});
const customTextStyle = ref({
  fontSize: "20rpx",
});
const mid = ref("");

onLoad((options) => {
  getMid(options);
});

// 获取mid
const getMid = (options) => {
  mid.value = options.mid;
  getMyData(mid.value);
};

const getMyData = async (mid) => {
  console.log(mid, "mid");
  let res = await getMyDataAPI({ mid });
  console.log(res);
  userInfo.value = res.data;
};

// 跳转到佣金明细和提现列表页面
const withdrawalBut = (type) => {
  if (type == 1) {
    uni.navigateTo({
      url: `/pages/my/brokerage-list?mid=${mid.value}`,
    });
  } else if (type == 2) {
    uni.navigateTo({
      url: `/pages/my/withdraw-list?mid=${mid.value}`,
    });
  } else {
    uni.navigateTo({
      url: `/pages/my/withdraw?mid=${mid.value}&amount=${userInfo.value.can_withdraw}`,
    });
  }
};
</script>

<style lang="scss">
.my {
  padding: 0 30rpx;
  // overflow: hidden;
  font-size: 26rpx;

  .card {
    margin: 30rpx 0;
    padding: 0 20rpx;
    height: 200rpx;
    border-radius: 16rpx;
    background-color: #ffffff;
    box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.2);

    .card-item {
      height: 50%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .card-item-text {
        font-size: 22rpx;
        font-weight: 700;
        display: flex;

        .card-item-text-price {
          color: #ff0000;
        }
      }

      .card-item-but {
        display: flex;
        font-size: 10rpx !important;
      }
    }
  }
}
</style>
